<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 在标签的属性前，加一个v-bind，效果是：强行把这个属性的值区域变成插值区域，也就是说这块属性区域中可以执行表达式，也可以获取到data中的值 -->
        <!-- v-bind可以简写成 ":"  即直接在前面加一个冒号就行 -->
        <img v-bind:src="imgUrl" v-bind:alt="imgUrlMeg">
        <img :src="imgUrl" :alt="imgUrlMeg">
        <div :Price="price*2">
            这个标签的Price属性的值就是2*2，也就是4
        </div>
        <!-- 两种拼接方法
            第一种是双引号加单引号
            第二种是模板字符串
        -->
        <img :src="baseUrl+'01.jpg'" alt="" />
        <img :src="`${baseUrl}02.jpg`" alt="" />
    </div>
</body>

</html>
<script src="../../../vue.js"></script>
<script>
    //用于优化，可写可不写
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: "#app",
        data() {
            return {
                imgUrl: "https://img0.baidu.com/it/u=2490092990,2162807358&fm=253&fmt=auto&app=138&f=JPEG?w=165&h=220",
                imgUrlMeg: "图",
                price: 2,
                baseUrl: "http://www.baidu.com/"
            }
        }
    })
</script>